<template>
  <div id="app">
    <SchoolView ref="school"/>
    <!--给对应的学生传递学费信息,最好使用：属性的方式就可以动态绑定一个表达式,-->
    <StudentView :count="count" @getLeaderName="getLeaderName"/>
    <button @click="getRef">点我获取对应的引用对象</button>
  <!--创建一个班级组件，班级组件里面有一个班主任信息，app需要获取班主任信息-->
    <ClassView :getLeaderName="getLeaderName"/>
  </div>
</template>
<script>
//导入组件
import SchoolView from './components/SchoolView.vue'
import StudentView from "@/components/StudentView.vue";
import ClassView from "@/components/ClassView.vue";
//了解父ref属性：ref属性添加之后，可以获取到对应的vc对象！
//父亲给子组件传递数据：使用props
//子组件传递数据给父组件，曲线救国方式：父组件传递一个函数给子组件，然后子组件把数据传递给父组件即可。
//还可以通过绑定时间，在子组件使用$emit触发时间获取对应的数据给父组件
//案例：在Student组件中设置对应的自定义点击事件，然后触发选择对应的事件传递数据
export default {
  name: 'App',
  components: {
    SchoolView,
    StudentView,
    ClassView,
  },
  data(){
    return{
      leaderName:'迪迦',
      count:100,
    }
  },
  methods:{
    //获取对应的学校对象，使用this.$refs.[标签名]
    getRef(){
      //能拿到对象，一定就能拿到对应的对象属性了
      //console.log(this.$refs.school) //获取对应的学校独享
      alert(this.$refs.school.name) //打印奥特曼中学
    },
    getLeaderName(val){
      console.log('我是父组件，我从子组件获取到了班主任是',val)
    },
    getStudentName(val){
      console.log('我是父组件,我从子组件获取到了学生名是',val)
    }

  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
